<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form label-width="80px">
        <el-form-item label="题目名称" class="filter-item">
          <el-input
            v-model="listQuery.condition.keyWord"
            placeholder="请输入题库名称"
            style="width: 400px;"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="所属题库" class="filter-item">
          <el-select
            v-model="listQuery.condition.libId"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in qusLibList"
              :key="item.id"
              :label="item.libName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" class="filter-item">
          <el-select
            v-model="listQuery.condition.type"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button
          v-waves
          class="filter-item"
          icon="el-icon-refresh-left"
          @click="resetSearch"
        >
          重置
        </el-button>
      </el-form>
    </div>
    <div class="my-table">
      <div class="table-operate">
        <div class="title">数据列表</div>
        <div class="btns" v-if="hasPerm('admin')">
          <el-button
            class="operate-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-edit"
            @click="handleCreate"
          >
            手动增题
          </el-button>
          <el-button
            v-waves
            :loading="importLoading"
            class="operate-item"
            type="primary"
            plain
            icon="el-icon-upload"
            @click="handleImport"
          >
            导入试题
          </el-button>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        :header-cell-style="headerCellStyle"
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" align="center" width="55">
        </el-table-column> -->
        <el-table-column label="序号" type="index" align="center" width="80">
          <template slot-scope="{ row, $index }">
            <span>{{ getIndex($index) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属题库" width="200">
          <template slot-scope="{ row }">
            <span>{{ row.libName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题型" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.typeDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题目">
          <template slot-scope="{ row }">
            <span>{{ row.question }}</span>
          </template>
        </el-table-column>
        <el-table-column label="答案" width="250">
          <template slot-scope="{ row }">
            <span>{{ row.answer }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" align="center" width="170">
          <template slot-scope="{ row }">
            <span>
              {{ row.createTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="hasPerm('admin')"
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row, $index }">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- form -->
    <FormDialog ref="tableForm" @afterSubmit="afterSubmit" />
    <UploadDialog ref="uploadForm" @afterSubmit="afterSubmit" />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination";
import baseMixin from "@/mixins/list";
import FormDialog from "./modules/FormDialog";
import UploadDialog from "./modules/UploadDialog";
import request from "@/utils/request";

export default {
  name: "Question",
  components: { Pagination, FormDialog, UploadDialog },
  directives: { waves },
  mixins: [baseMixin],
  data() {
    return {
      Urls: {
        listUrl: "/api/question/page",
        delUrl: "/api/question/delete/",
        importExcelUrl: "/api/question/import/",
        exportExcelUrl: "/api/question/result/export",
        qusLibListUrl: "/api/question/lib/list"
      },
      qusLibList: [],
      typeList: [
        { name: "单选", value: "choice" },
        { name: "判断", value: "judge" }
      ],
      listQuery: {
        orderBy: [
          {
            desc: false,
            orderBy: "id"
          }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getQusLibList();
    if (this.$route.query.libId) {
      this.listQuery.condition.libId = this.$route.query.libId;
      this.getList();
    }
  },
  methods: {
    // 获取题库
    getQusLibList() {
      request({
        url: this.Urls.qusLibListUrl,
        method: "get"
      })
        .then(res => {
          console.log("form list", res);
          if (res.code == 0) {
            this.qusLibList = res.data.records || [];
          } else {
            that.$notify({
              title: "提示",
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(err => {
          that.dialogFormVisible = false;
        });
    },
    handleImport() {
      this.$refs.uploadForm.add();
    }
  }
};
</script>
